@charset "UTF-8";
/* *{outline:1px dotted #999} */
html, body{margin:0;padding:0;height:100%;overflow:hidden}
body{background:#999;font-family:'Trebuchet MS', sans-serif}
img{border:0}

h1, #logo{display:none}
#editor, #preview{width:50%;height:100%;margin:0;padding:1.5em 0;overflow:hidden;
 -webkit-transition:all 0.3s linear;
 -moz-transition:all 0.3s linear;
 -o-transition:all 0.3s linear;
 transition:all 0.3s linear}
#editor{position:relative;float:left}
#previewframe{background:#fff;border:0;width:100%;height:100%}
#code, #visual{background:#fff;padding:1em;font-family:monospace;height:100%;border:0;outline:0}
#visual{position:absolute}
#code{background:transparent;width:100%;opacity:0.1;position:absolute}

#menubar, #statusbar{background:#ddd;height:1.5em;width:100%;position:absolute;cursor:pointer}
#menubar ul, #statusbar ul{margin:0;padding:0}
#menubar li, #statusbar li{display:block;float:left;padding:0 1em}
#menubar a, #statusbar a{color:#000;text-decoration:none}
#menubar li ul{color:#ccc;background:#ddd;position:absolute;display:none}
#menubar li ul li{clear:left}
#menubar li:hover ul{display:block}
#menubar{top:0}
#statusbar{bottom:0}

#blackarea {background:#000;width:100%;height:100%;
position:absolute;top:0;left:0;display:none;opacity:0.8}
#about, #todo{background:#fff;padding:1em;width:600px;height:400px;margin-top:-200px;margin-left:-300px;position:absolute;top:50%;left:50%;overflow:auto;display:none}
